<template>
  <basic-container>
    <el-row :gutter="24" class="subject-info">
      <el-col :span="6" style="padding-right: 0px;">
        <el-card class="border-card" shadow="never">
          <div slot="header" class="clearfix">
            <h4 class="el-card__title">政策专题</h4>
          </div>
          <el-tree
                  node-key="id"
                  ref="tree"
                  default-expand-all
                  highlight-current
                  :expand-on-click-node="false"
                  empty-text=""
                  :data="treeData"
                  :props="treeProps"
                  @node-click="handleNodeClick"
                  style="min-height: 580px; overflow: auto">
          </el-tree>
        </el-card>
      </el-col>
      <el-col :span="18" style="padding-left: 0px;">
        <el-card class="border-card dict-list-card" shadow="never">
          <div slot="header">
            <h4 class="el-card__title">已设置政策专题列表</h4>
            <el-button type="primary"
                       icon="el-icon-plus"
                       @click="handleAdd"
                       size="small"
                       :disabled="addDisabled"
                       style="margin-left: 20px;">新增
            </el-button>
            <el-button type="danger"
                       icon="el-icon-close"
                       @click="handleBatchDel"
                       size="small"
                       :disabled="delDisabled"
                       style="margin-left: 20px;">批量取消
            </el-button>
            <div class="el-card__tool" @keyup.enter="querySearch">
              <el-input placeholder="请输入查询条件" size="mini" style="width:300px;" v-model="queryStream">
                <el-button slot="append" size="mini" icon="el-icon-search" @click="querySearch"></el-button>
              </el-input>
            </div>
          </div>
          <avue-crud ref="crud"
                     class="policy-list"
                     :option="option"
                     :data="data"
                     v-model="ruleForm"
                     :page="page"
                     @selection-change="selectionChange"
                     @current-change="currentChange"
                     @size-change="sizeChange"
                     style="min-height: 580px;">
            <template slot-scope="scope" slot="menu">
              <el-button type="text"
                         icon="el-icon-delete"
                         size="small"
                         @click="rowDel(scope.row,scope.index)">删除
              </el-button>
            </template>
          </avue-crud>
        </el-card>
      </el-col>
    </el-row>
    <vDialog title="政策选择" width="70%" top="5vh" :option="selectDialogOption" :confirm="selectConfirm">
      <avue-crud ref="selectCrud"
                 class="policy-select"
                 :option="selectOption"
                 :data="selectData"
                 v-model="selectForm"
                 :page="selectPage"
                 @selection-change="searchSelectionChange"
                 @search-change="searchSelectChange"
                 @search-reset="searchSelectReset"
                 @current-change="currentSelectChange"
                 @size-change="sizeSelectChange">
      </avue-crud>
    </vDialog>
  </basic-container>
</template>
<script>
  import { getList, remove, getSelectList, selectSave } from "@/api/policy/subject";
  import { dictTreeByCode } from "@/api/system/dict";
  export default {
    name: "subject-info",
    inheritAttrs: false,
    components: {
      vDialog: () => import('_c/vDialog')
    },
    data() {
      return {
        treeProps: {
          label: "title",
          value: 'id',
          children:'children'
        },
        treeData: [],
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        addDisabled: true,
        delDisabled: true,
        queryStream: '',
        option: {
          border: true,
          // index: true,
          // indexLabel: '序号',
          size: 'small',
          menuWidth: 100,
          addBtn: false,
          editBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          searchBtn: false,
          selection: true,
          column: [
            {
              label: "标题",
              prop: "basicTitle",
              readonly: true,
              minWidth: 200,
              span: 24
            },
            // {
            //   label: "文号",
            //   prop: "basicIssuedNumber",
            //   hide: true,
            //   readonly: true,
            //   span: 24,
            // },
            // {
            //   label: "原文地址",
            //   prop: "basicSourceUrl",
            //   readonly: true,
            //   formslot: true,
            //   span: 24
            // },
            {
              label: "发文部门",
              prop: "basicDepartmentName",
              readonly: true,
              span: 6
            },
            // {
            //   label: "所属区划",
            //   prop: "regionName",
            //   hide: true,
            //   readonly: true,
            //   formslot: true,
            //   span: 6
            // },
            {
              label: "发文日期",
              prop: "basicReleaseDate",
              type: "datetime",
              format: "yyyy-MM-dd",
              align: 'center',
              span: 6
            },
            // {
            //   label: "收集时间",
            //   prop: "collectDate",
            //   type: "datetime",
            //   hide: true,
            //   readonly: true,
            //   formslot: true,
            //   span: 6
            // }
          ]
        },
        data: [],
        ruleForm: {},
        subjectId: '',
        policySelData: [],

        selectDialogOption:{
          show:false
        },
        selectPage: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectOption: {
          border: true,
          addBtn: false,
          tip: false,
          reserveSelection: true,
          columnBtn: false,
          refreshBtn: false,
          editBtn: false,
          delBtn: false,
          searchBtn: false,
          selection: true,
          index: false,
          size: 'small',
          dialogHeight: 310,
          maxHeight: 280,
          searchMenuSpan: 6,
          menu: false,
          column: [
            {
              label: "标题",
              prop: "basicTitle",
              search: true,
              minWidth: 200,
              searchSpan: 18
            },
            {
              label: "发文部门",
              prop: "basicDepartmentName",
              search: false
            },
            {
              label: "发文日期",
              prop: "basicReleaseDate",
              type: "datetime",
              format: "yyyy-MM-dd",
              align: 'center',
              search: false
            }
          ]
        },
        selectData: [],
        selectForm: {},
        selectedData: [],
        searchParams: {}
      }
    },
    created() {
      this.getSubjectTree();
      this.getPolicyList(this.page);
    },
    methods: {
      getSubjectTree() {
        this.treeData = [];
        dictTreeByCode('policy_special_subject').then(res => {
          this.treeData = res.data;
        })
        this.addDisabled = true;
      },
      getPolicyList(page, params = {}) {
        this.policySelData = [];
        getList(page.currentPage, page.pageSize, params).then(res => {
          const data = res.data;
          this.page.total = data.total;
          this.data = data.records;
        });
      },
      handleNodeClick(data) {
        this.subjectId = data.id;
        this.addDisabled = false;
        this.page.currentPage = 1;
        this.page.pageSize = 10;
        this.getPolicyList(this.page, {subjectId: this.subjectId});
      },
      handleAdd() {
        this.selectDialogOption.show = true;
        this.onSelectLoad(this.selectPage, {subjectId: this.subjectId}, true);
      },
      handleBatchDel() {
        if (this.policySelData.length < 1) {
          this.$message({
            type: "error",
            message: "请选择政策"
          });
          return;
        }
        let removeList = []
        for(let item of this.policySelData) {
          removeList.push({policyId: item.policyId, subjectId: item.subjectId});
        }
        this.$confirm("确定要取消选中政策的专题设置吗?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(removeList);
          })
          .then(ret => {
            if (ret.success) {
              this.getPolicyList(this.page, {subjectId: this.subjectId});
              this.$message({
                type: "success",
                message: "操作成功!"
              });
            } else {
              this.$message({
                type: "error",
                message: ret.msg
              });
            }
          }).catch(() => {
        });
      },
      rowDel(row, index) {
        this.$confirm("确定要删除该政策的专题设置吗?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let removeList = [];
            removeList.push({policyId: row.policyId, subjectId: row.subjectId});
            return remove(removeList);
          })
          .then(ret => {
            if (ret.success) {
              this.getPolicyList(this.page, {subjectId: this.subjectId});
              this.$message({
                type: "success",
                message: "操作成功!"
              });
            } else {
              this.$message({
                type: "error",
                message: ret.msg
              });
            }
          }).catch(() => {
        });
      },
      selectionChange(list) {
        if (list.length > 0) {
          this.delDisabled = false;
        } else {
          this.delDisabled = true;
        }
        this.policySelData = list;
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
        this.getPolicyList(this.page, {subjectId: this.subjectId});
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
        this.getPolicyList(this.page, {subjectId: this.subjectId});
      },
      querySearch() {
        this.page.currentPage = 1;
        this.page.pageSize = 10;
        this.getPolicyList(this.page, {query: this.queryStream});
      },

      onSelectLoad(page, params = {subjectId: this.subjectId}, reset) {
        this.selectedData = []
        this.searchParams.subjectId = this.subjectId
        if (reset && this.$refs.selectCrud) {
          this.selectPage.currentPage = 1;
          this.selectPage.pageSize = 10;
          this.$refs.selectCrud.selectClear();
          this.$refs.selectCrud.searchReset();
        }
        getSelectList(page.currentPage, page.pageSize, params).then(res => {
          const data = res.data;
          this.selectPage.total = data.total;
          this.selectData = data.records;
        });
      },
      searchSelectionChange(list) {
        this.selectedData = list
      },
      selectConfirm() {
        if (this.selectedData.length < 1) {
          this.$message({
            type: "error",
            message: "请选择政策"
          });
          return;
        }
        let policyIds = ""
        for(let item of this.selectedData) {
          policyIds += item.id + ","
        }
        selectSave(policyIds, this.subjectId).then(() => {
          this.onSelectLoad(this.selectPage, this.searchParams, true);
          this.getPolicyList(this.page, {subjectId: this.subjectId});
          // this.selectDialogOption.show = false
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        }, error => {
          console.log(error);
        });
      },
      searchSelectChange(params,done) {
        params.subjectId = this.subjectId
        this.searchParams = params;
        this.onSelectLoad(this.selectPage, params);
        done();
      },
      searchSelectReset() {
        this.searchParams = {subjectId: this.subjectId};
        this.onSelectLoad(this.selectPage);
      },
      currentSelectChange(currentPage) {
        this.selectPage.currentPage = currentPage;
        this.onSelectLoad(this.selectPage, this.searchParams);
      },
      sizeSelectChange(pageSize) {
        this.selectPage.pageSize = pageSize;
        this.onSelectLoad(this.selectPage, this.searchParams);
      },
    }
  }
</script>
<style scoped lang="scss">
  @import "~_s/placeholders";
  @import '~_s/table-list';
  ::v-deep .subject-info {
    .el-card {
      .el-card__header {
        padding: 5px 15px;
      }
      .el-card__title {
        font-size: 14px;
      }
    }
  }
  ::v-deep .policy-list {
    @extend %fullsize;
    @extend %table-list;
    .avue-crud__menu {
      display: none;
    }
    .avue-crud__tip {
      display: none;
    }
  }
  ::v-deep .policy-select {
    .avue-crud__menu {
      display: none;
    }
    .avue-crud-search__menu {
      height: 32px;
    }
  }
</style>